본문으로 건너뛰기

디자인 컬러 관리와 변수명 설정

현재 관리 상태​

  • 프로토타이핑 툴(figma)을 사용해 서비스를 디자인 하는 과정에서 색상을 디자인에 직관적으로 적용하다보니 page와 component가 늘어날 수록 관리가 되지 않기 시작
  • 더 이상 지켜만 볼 수 없어 부채가 더 쌓이기 전에 관리 방법에 대해 고민
  • 비슷한 색상들은 최대한 묶어볼 수 있지 않을까? 라는 생각에 이어 이름도 효율적으로 관리해볼 수 있지 않을까에 대한 고민으로 이어짐

현재 문제점​

  1. 명암에 대한 구분을 투명도로 했을 경우, 배경이 비칠 경우가 있어 표현하고자 하는 색상을 정확히 표현하지 못할 수 있다.
  2. 특정한 목적을 갖고 있지 않는 한, 색상 마다 미세한 차이를 두는 것은 색상을 관리하는데 어려움만 줄 뿐이다.
  3. 색상은 공통적으로 쓰일 수 있기 때문에 이름은 독립적으로 사용해야 혼선을 줄일 수 있다.

해결 방법​

  1. 불필요한 색상은 통합
  2. 특정한 목적에 한해서만 투명도 적용
  3. 색상 그룹핑 & 고유 명사화

적용 결과​